<template>
    <div class="firePanel statistics">
        <div class="condition">
            <!-- 时间单选 -->
            <div class="singleCheck">
                <el-radio v-model="timeSelect" label="1">实时</el-radio>
                <el-radio v-model="timeSelect" label="12">12小时</el-radio>
                <el-radio v-model="timeSelect" label="24">24小时</el-radio>
                <el-radio v-model="timeSelect" label="-1">自定义</el-radio>
            </div>
            <!-- 时间选择器 -->
            <div class="datetime-picker" v-if="showDatePicker">
                <el-date-picker
                    popper-class="datetime-panel"
                    v-model="startTime"
                    type="date"
                    format="YYYY-MM-DD"
                    value-format = "YYYY-MM-DD"
                    @change="(e) => timePickerChange('start', e)"
                    placeholder="开始时间"
                ></el-date-picker>
                <span class="line"></span>
                <el-date-picker
                    v-model="endTime"
                    type="date"
                    @change="(e) => timePickerChange('end', e)"
                    format="YYYY-MM-DD"
                    value-format = "YYYY-MM-DD"
                    placeholder="结束时间"
                ></el-date-picker>
            </div>
            <!-- 区划类型 -->
            <div class="second">
                <div class="area">
                    <!-- <span>区划:</span>
                    <div class="selectModel">
                        <div class="selected" @click="showItems">
                            {{ currentBM }}
                        </div>
                        <div v-show="showItem" class="selectItems">
                            <div
                                class="selectItem"
                                v-for="item in areaOption"
                                :key="item.label"
                                @click="handleBMClick(item)"
                            >
                                {{ item.label }}
                            </div>
                        </div>
                    </div> -->
                    <!-- <el-select class="fireCondition" v-model="area" placeholder="请选择">
                        <el-option
                        v-for="item in areaOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        >
                        </el-option>
                    </el-select> -->
                    <!-- <el-select class="fireCondition" placeholder="请选择">
                        <el-option
                            v-for="item in [1, 2, 3, 4, 5]"
                            :key="item"
                            :label="item"
                            :value="item"
                        >
                        </el-option>
                    </el-select> -->
                </div>
                <div class="type" v-show="false">
                    <span>类型:</span>
                    <el-select
                        class="fireCondition"
                        v-model="type"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in typeOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="third">
                <div class="strength" v-show="false">
                    <span>强度:</span>
                    <el-select
                        class="fireCondition"
                        v-model="strength"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in strengthOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </div>
                <div class="search" v-show="false">
                    <el-input
                        class="searchInput"
                        placeholder="请输入火点编号"
                        v-model="fireCode"
                    ></el-input>
                </div>
                <p class="dateBtn" @click="handleTimeSelect">查询</p>
            </div>
        </div>
        <div class="refresh" @click="refreshData()" title="刷新火点列表">
            <i class="el-icon-refresh-left"></i>
        </div>
        <ListPanel
            :fireAllInfo="fireAllInfo"
            @setFireId="setFireId"
        ></ListPanel>
        <el-pagination
            class="pagination"
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :pager-count="5"
            :small="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        >
        </el-pagination>

        <!-- <el-pagination
      class="pagination"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      :pager-count="5"
      layout="total, prev, pager, next"
      :total="total"
    ></el-pagination> -->
        <!-- <audio ref="audio" :src="audioUrl" :loop="true"></audio> -->
        <!-- <div
      class="cover"
      v-if="pictLoading"
      v-loading="pictLoading"
      element-loading-background="rgba(0, 0, 0, 0.5)"
      :element-loading-text="loadingText"
    ></div> -->
    </div>
</template>

<script>
import ListPanel from "./ListPanel.vue";
// import { mapGetters } from "vuex";
export default {
    name: "firePanel",
    data() {
        return {
            timeSelect: "1",
            area: "",
            areaOption: [
                { value: "", label: "全部" },
                { value: "海口市", label: "海口" },
                { value: "万宁市", label: "万宁" },
                { value: "陵水黎族自治县", label: "陵水" },
                { value: "乐东黎族自治县", label: "乐东" },
                { value: "五指山市", label: "五指山" },
                { value: "定安县", label: "定安" },
                { value: "琼中黎族苗族自治县", label: "琼中" },
                { value: "文昌市", label: "文昌" },
                { value: "三亚市", label: "三亚" },
                { value: "琼海市", label: "琼海" },
                { value: "屯昌县", label: "屯昌" },
                { value: "儋州市", label: "儋州" },
                { value: "白沙黎族自治县", label: "白沙" },
                { value: "昌江黎族自治县", label: "昌江" },
                { value: "澄迈县", label: "澄迈" },
                { value: "保亭黎族苗族自治县", label: "保亭" },
                { value: "东方市", label: "东方" },
                { value: "临高县", label: "临高" },
                { value: "三沙市", label: "三沙" },
            ],
            type: "",
            typeOption: [
                { value: "", label: "全部" },
                { value: "森林", label: "森林" },
                { value: "农田及自然植被", label: "农田及自然植被" },
                { value: "草地", label: "草地" },
                { value: "城市或荒漠", label: "城市或荒漠" },
                { value: "灌木", label: "灌木" },
            ],
            strength: "",
            strengthOption: [
                { value: "", label: "全部" },
                { value: "1", label: "1" },
                { value: "2", label: "2" },
                { value: "3", label: "3" },
                { value: "4", label: "4" },
                { value: "5", label: "5" },
                { value: "6", label: "6" },
                { value: "7", label: "7" },
                { value: "8", label: "8" },
                { value: "9", label: "9" },
                { value: "10", label: "10" },
            ],
            fireAllInfo: {},
            startTime: "",
            endTime: "",
            fireCode: "",
            showDatePicker: false,
            currentPage: 1,
            pageSize: 15,
            total: 0,
            audioUrl: "img/test.wav", //报警提示音
            isPlay: false,
            pictLoading: true, //ws连接等待效果
            loadingText: "正在连接，请稍后...",
            reConnect: 0, //ws重连次数
            websock: null,
            showItem: false,
            currentBM: "",
        };
    },
    // computed: {
    //   ...mapGetters(["getSmallPanel"]),
    // },
    watch: {
        timeSelect(val) {
            if (val == -1) {
                // this.startTime = "2021-04-04 17:40:00";
                // this.endTime = "2021-04-04 18:50:00";
                this.showDatePicker = true;
            } else {
                this.startTime = "";
                this.endTime = "";
                this.showDatePicker = false;
                this.websocketsend();
            }
        },
    },
    components: {
        // Title,
        ListPanel,
        // FireDetail,
        // FireAnalyze,
    },
    mounted() {
        this.initWebSocket();
    },
    methods: {
        //select start-----------------
        handleBMClick(item) {
            this.showItem = false;
            this.currentBM = item.value;
        },
        showItems() {
            this.showItem = !this.showItem;
        },
        handleSizeChange() {},
        // 重置
        refreshData() {
            this.startTime = "";
            this.endTime = "";
            this.area = "";
            this.type = "";
            this.strength = "";
            this.fireCode = "";
            if (this.timeSelect === "1") {
                this.websocketsend();
            } else {
                this.timeSelect = "1";
            }
        },
        // 分页
        handleCurrentChange(data) {
            this.websocketsend(data);
        },
        // 设置时间选择器起止时间
        timePickerChange(type, data) {
            //this.compareTime();
        },
        // 比较时间前后
        compareTime() {
            let startTimeStamp = Cesium.C_dayjs(this.startTime).valueOf();
            let endTimeStamp = Cesium.C_dayjs(this.endTime).valueOf();
            if (startTimeStamp > endTimeStamp) {
                this.$message({
                    type: "error",
                    message: "开始时间不能晚于结束时间",
                });
                return false;
            } else {
                return true;
            }
        },
        handleTimeSelect() {
            this.websocketsend();
        },
        // 初始化ws
        initWebSocket() {
            //const wsuri = "ws://192.168.1.147:8033/ws/firePoint?Authorization=aGFpa29maXJlYWxhcm1zeXN0ZW1rZXk=";
            const wsuri = window.huoqingUrl;
            this.websock = new WebSocket(wsuri);
            this.websock.onmessage = this.websocketonmessage;
            this.websock.onopen = this.websocketonopen;
            this.websock.onerror = this.websocketonerror;
            this.websock.onclose = this.websocketclose;
        },
        // ws连接成功
        websocketonopen() {
            console.log("ws连接成功");
            this.websocketsend();
            this.pictLoading = false;
        },
        // ws失败重连
        websocketonerror() {
            if (this.reConnect < 3) {
                this.initWebSocket();
                this.loadingText = `正在尝试第${this.reConnect + 1}次重连`;
                this.reConnect++;
            } else {
                this.$message("数据实时获取失败");
                this.loadingText = "数据连接失败";
            }
        },
        // ws信息接收
        websocketonmessage(e) {
            // return;
            let data = JSON.parse(e.data);
            if (data.isPush && !this.isPlay) {
                // this.$refs.audio.play();
                this.isPlay = true;
                this.$alert("有新增火点，请刷新列表查看！", {
                    confirmButtonText: "确定",
                    callback: (action) => {
                        // this.$refs.audio.pause();
                        this.isPlay = false;
                    },
                });
            } else if (data.isPush && this.isPlay) {
                console.log("持续报警");
            } else {
                // 替换
                this.total = data.total;
                this.fireAllInfo = data;
                this.$emit("setFireData", data);
            }
            // console.log(data)
        },
        // ws信息发送
        websocketsend(page = 1) {
            let start = this.timeSelect === -1 ? this.startTime+" 00:00:00" : this.startTime;
            let end = this.timeSelect === -1 ? this.endTime+" 00:00:00" : this.endTime;
            // console.log(this.startTime, this.endTime)
            // this.$store.commit("setSmallPanel", "");
            this.websock.send(
                JSON.stringify({
                hour: this.timeSelect,
                pageNum: page,
                pageSize: this.pageSize,
                startTime: start,
                endTime: end,
                code: this.fireCode,
                type: this.type,
                intensityT: this.strength,
                region: this.area,
                })
            );
        },
        // ws关闭连接
        websocketclose(e) {
            console.log("ws断开连接", e);
        },
        // 更新当前点击的
        setFireId(val) {
            // this.$emit('setFireId', val)
        },
    },
    //   beforeUnmount(){
    //       console.log(this.websock)
    //       this.websock.close();
    //     try {
    //         // this.websocketclose()
    //     } catch (error) {

    //     }
    //   },
};
</script>
<style>
/* 031D2B */

.el-date-table td span{
    color:#000!important;
}
</style>
<style scoped>
.selectItems::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.selectItems::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
}
.selectItems::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.5);
}
</style>
<style lang="stylus">
.firePanel.statistics {
    .singleCheck {
        // width: 90%;
        // display: flex;
        // justify-content: space-between;
        // margin: 10px 0;

        .el-radio {
            margin-right: unset;

            .el-radio__inner {
                background: rgba(0, 0, 0, 0);
                border: 1px solid #c3c3c3;
            }

            .el-radio__label {
                color: #ffffff;
                font-size: 13px;
            }

            .el-radio__input.is-checked .el-radio__inner {
                border-color: #17d0ff !important;
            }

            .el-radio__input.is-checked .el-radio__inner::after {
                background: #17d0ff !important;
            }

            .el-radio__input.is-disabled + span.el-radio__label {
                color: #c0c4cc !important;
                cursor: not-allowed;
            }
        }
    }

    .datetime-picker {
        width: 100%;
        display: flex;
        justify-content: space-between;
        //margin-bottom: 10px;

        .el-date-editor.el-input {
            width: 48%;

            .el-input__icon {
                line-height: 30px;
            }

            input {
                height: 30px;
            }
        }
    }
    .datetime-panel{

    }

    .el-input input {
        // border: 1px solid #17d0ff;
        // border:1px solid rgba(23, 208, 255, .1);
        border: 1px solid rgba(23, 208, 255, 0.5);
        border-radius: 3px;
        background: rgba(7, 39, 66, 0.38);
    }

    .second, .third {
        margin-bottom: 10px;

        .area {
            display: flex;

            span {
                display: inline-block;
                height: 33px;
                line-height: 33px;
            }
        }

        .el-input--suffix .el-input__inner {
            width: 220px;
            height: 30px;
            vertical-align: middle;
        }

        .el-input__icon {
            line-height: 30px;
        }

        .el-input input {
            width: 150px;
            height: 30px;
            vertical-align: middle;
        }

        .selectModel {
            position: relative;

            .selected {
                width: 120px;
                height: 33px;
                line-height: 30px;
                font-size: 12px;
                border: 1px solid rgba(23, 208, 255, 0.5);
                border-radius: 3px;
                background: rgba(7, 39, 66, 0.38);
                text-indent: 10px;
            }

            .selectItems {
                position: absolute;
                top: 32px;
                width: 200px;
                max-height: 200px;
                border: 1px solid #ddd;
                border-radius: 5px;
                background: rgba(0, 0, 0, 0.8);
                padding: 10px 10px;
                overflow-y: scroll;

                .selectItem {
                    color: #fff;
                    height: 30px;
                    line-height: 30px;
                }

                .selectItem:hover {
                    color: #00eaff;
                    background: rgba(0, 0, 0, 0.3);
                }
            }
        }
    }

    .third {
        .el-input--suffix .el-input__inner {
            width: 80px;
        }
    }

    .pagination {
        text-align: center;
        color: unset;

        button:disabled {
            background-color: unset;
        }

        span {
            color: #fff;
        }

        .btn-next, .btn-prev {
            background: unset;
            color: #fff;
        }

        .el-dialog, .el-pager li {
            background: unset;
        }
    }
}
</style>
<style lang="stylus" scoped>
.firePanel.statistics {
    flex: 1;
    height: 390px;
    display: flex;
    flex-direction: column;
    position: relative;

    .cover {
        width: 100%;
        height: 100%;
        background: rgba(50, 50, 50, 0.5);
        position: absolute;
        top: 0;
        left: 0;
    }

    .condition {
        .second, .third {
            float: right;
            display: flex;
            justify-content: space-between;
            align-items: center;

            span {
                margin-right: 5px;
                font-size: 14px;
            }
            .dateBtn {
                font-size: 12px;
                width: 54px;
                height: 27px;
                margin-left: 25px;
                border: 1px solid #17d0ff;
                border-radius: 3px;
                text-align-last: center;
                line-height: 27px;
                cursor: pointer;
                align-self:flex-end;
            }
        }
    }

    .refresh {
        position: absolute;
        right: 0;
        top: 9px;
        cursor: pointer;
    }
}
</style>